// todo 1-3 移动端适配 引入 postcss-pxtorem 设计稿中的测量出来的长度都是 px, 无法自动适应设备，如果自己手写 px 转换 rem 太麻烦了，可以使用`postcss-pxtorem`来自动设置
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

// todo 1-6 引入全局less
// 导入path模块
const path = require('path')
// 暴露出去
module.exports = {
  // todo 1-11
  // 修改publicPath使用相对路径
  publicPath: './',
  // todo 1-12接口代理
  devServer: {
    proxy: {
      '/xxx': {
        target: 'http://ttapi.research.itcast.cn', // http://ttapi.research.itcast.cn/app/v1_0/channels
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/xxx': ''
        }
      }
    }
  },
  // css属性如何处理
  css: {
    // 处理的选项
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          // 使用 pxtorem库进行转换
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  },
  // 插件配置
  pluginOptions: {
    // style-resources-loader配置
    'style-resources-loader': {
      // 预处理程序选择 less
      preProcessor: 'less',
      // 参数
      patterns: [
        // 项目根路径下 /src/styles/ 的所有less文件
        // 指定某一个的话可以具体设置为某一个less文件
        path.resolve(__dirname, './src/style/global/*.less')
      ]
    }
  }
}
